function mergeJSON(minor, main) {
                for(var key in minor) {
                    if(main[key] === undefined) { 
                        main[key] = minor[key];
                        continue;
                    }
                   
                    console.log(key)
                    if(isJSON(minor[key])||isArray(minor[key])) { 
                        console.log("is json")
                        
                        mergeJSON(minor[key], main[key]);
                    }else{
                        main[key] = minor[key];
                    }
                }
}

function isJSON(target) {
    return typeof target == "object" && target.constructor == Object;
}

function isArray(o) {
    return Object.prototype.toString.call(o) == '[object Array]';
}

function parseJsonAttr(jsonAttr,value) {

    var array = jsonAttr.split("_")
    var jsonAttr = "{"
    for (i=0;i<array.length;i++) {
        if (i==(array.length-1)) {
            jsonAttr+="\""+array[i]+"\":"
        } else {
            jsonAttr+="\""+array[i]+"\":{"
        }
    }

    jsonAttr+="\""+value+"\""
    var prefix = ""
    for (i=0;i<array.length;i++) {
        prefix += "}"
    }
    
    jsonAttr +=  prefix  
    //console.log(jsonAttr)
    var json = JSON.parse(jsonAttr)
    console.log(json)
    chartOption = Ext.Object.merge(chartOption,json)
    console.log(chartOption)
    chart1.setOption(json)


}

function formatOptionId(optionId) {
    var result = ""
    var temp = optionId.substring(0, 1).toUpperCase() + optionId.substring(1);  
    for(var i=0;i<temp.length;i++){            
        var a = temp.charAt(i);
        if (i==0) {
            result = ""+a
        } else {
            if( a>64 && a<91 ){              
                result += " "+a                
            }else{                
                result += ""+a          
            } 
        }    
    }
        
    if (optionId=="useUTC") {
        result = "Use UTC"
    }
    return result
}


function renderField(p) {
    var field

    field = { 
        itemId:p.optionJson.replace(":","_"),
        listeners:{
            change:function( obj, newValue, oldValue, eOpts) {
                if (chart1!=null) {
                    parseJsonAttr(obj.itemId,'#'+newValue)
                }
            }
        },
        value:p.optionValue,
        xtype:'colorfield',
        fieldLabel: '<font style="font-weight:bold" color=blue>'+p.optionName+'</font> '+formatOptionId(p.optionId)
    }

    if (p.optionType=="color") {
        field = { 
            itemId:p.optionJson.replace(":","_"),
            listeners:{
                change:function( obj, newValue, oldValue, eOpts) {
                    if (chart1!=null) {
                        parseJsonAttr(obj.itemId,'#'+newValue)
                    }
                                
                }
            },
            value:p.optionValue,
            xtype:'colorfield',
            fieldLabel: '<font style="font-weight:bold" color=blue>'+p.optionName+'</font> '+formatOptionId(p.optionId)
        }
    }

    if (p.optionType=="number") {
        field = { 
            itemId:p.optionJson.replace(":","_"),
            listeners:{
                change:function( obj, newValue, oldValue, eOpts) {
                    if (chart1!=null) {
                        parseJsonAttr(obj.itemId,'#'+newValue)
                    }
                                
                }
            },
            value:p.optionValue,
            xtype:'numberfield',
            fieldLabel: '<font style="font-weight:bold" color=blue>'+p.optionName+'</font> '+formatOptionId(p.optionId)
        }
    }

    return field
}


function createSerie(type) {
    var typeMap = {'line':'折线','bar':'柱状','pie':'饼'}
    Ext.MessageBox.show({
        title: '新建'+typeMap[type]+'图',
        msg: '请输入'+typeMap[type]+'图的名称:',
        closable:false,
        width:300,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        scope: this,
        fn: function(btn, text) {
            if (btn=="ok") {
                Ext.Ajax.request({
                    url: '../app/createserie',
                    params: {chartId:chartId,serieType:type,serieName:text},
                    success:function(response) {
                        var res = Ext.JSON.decode(response.responseText) 
                        //console.log(res)
                        Ext.getCmp('chartTree').getStore().load()    
                        

                        if (chartOption.series==null) {
                            chartOption.series = []
                        } 
                        chartOption.series.push(
                            {
                                type:type
                            }
                        )
                        

                        if (type=="line" || type=="bar") {
                            var o = {
                                xAxis: {type: 'category'},
                                yAxis: {}
                            }

                            chartOption = Ext.Object.merge(o,chartOption)
                        }

                        //console.log(res)
                        chart1.setOption(chartOption)

                        var fieldsetItems = []
                        
                        for (var i=0;i<=2;i++) {
                            //console.log(i)
                            var pItems = []
                            for (var j=0;j<seriesOption[type].length;j++) {
                                if(j%3==i) {
                                    pItems.push(renderField(seriesOption[type][j]))
                                }
                            }

                            fieldsetItems.push({"items":pItems})
                           
                        }

                        //console.log(fieldsetItems)
                        Ext.getCmp('attrPanel').add(
                            {
                                xtype:'tabpanel',
                                id:'seriesConfig'+res.lastId,
                                hidden:true,
                                height: 300,
                                title:'属性配置',
                                autoScroll:true, 
                                autoDestroy:false,
                                plain:true,
                                defaults: {
                                    bodyPadding: 10,
                                    scrollable: true
                                },
                                tools:[
                                    {
                                        iconCls: 'x-fa fa-bars',
                                        handler: function(event, toolEl, panelHeader) {}
                                    },
                                    {
                                        iconCls: 'x-fa fa-align-center',
                                        handler: function(event, toolEl, panelHeader) {}
                                    },
                                    {
                                        iconCls:'x-fa fa-align-justify',
                                        callback: function(panel, tool, event) {}
                                    }
                                ],
                                items: [
                                    {
                                        title: res.serieName,
                                        layout:'hbox',
                                        selected:true,
                                        bodyPadding: 0,
                                        closeAction:'hide',
                                        defaults: {
                                            bodyPadding: 0,
                                            scrollable: true
                                        },
                                        items:[
                                            {
                                                xtype:'form',
                                                border:false,
                                                width:1800,
                                                height:260,
                                                items:[
                                                    {
                                                        xtype: 'fieldset',
                                                        title: '',
                                                        collapsible: false,
                                                        layout: 'column',
                                                        defaults: {
                                                            layout: 'form',
                                                            xtype: 'container',
                                                            defaultType: 'textfield',
                                                            style: 'width: 33.333%;'
                                                        },
                                                        items: fieldsetItems
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            })

                                                                
                    }
                });
            }
        }                                                            
    });

                                                        
}